<template>
	<view>
		<view class="top-card flex flex-column justify-start align-center">

			<view class="">
				<u-icon name="rmb-circle-fill" color="#F5C24C" size="28"></u-icon>
				<text class="f14px pl2">到账余额(元)</text>
			</view>

			<view style="font-size: 64rpx;padding-top: 60rpx;">{{Number(info.amount).toFixed(2)}}</view>

			<view class="f-85 f14px" @click="$navTo('pages/assets/withdraw/list')">
				提现记录<u-icon name="arrow-right"></u-icon>
			</view>

			<u-button type="success" size="default" class="w-100" :custom-style="{
					marginTop:'90rpx',
					height:'88rpx',
					lineHeight:'88rpx',
					background:'linear-gradient(270deg, #55E964 0%, #00AF4E 100%)'
					}" ripple @click="goWithdraw">提现</u-button>
		</view>

		<view class="cell-group">
			<u-cell-group :border="false">
				<u-cell-item icon="red-packet" title="余额明细" @click="$navTo('pages/assets/balance')"></u-cell-item>
				<u-cell-item icon="order" title="提现管理" @click="$navTo('pages/assets/withdraw/account')"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/assets/index.js'
	export default {
		data() {
			return {
				info: {
					amount: 0,
					min_amount: 10,
				}
			};
		},
		methods: {
			goWithdraw() {
				const app = this;
				const {
					amount,
					min_amount,
					is_bind
				} = this.info;
				if (is_bind == 0) {
					uni.showModal({
						title: '温馨提示',
						content: '提现需先绑定支付宝',
						confirmText: '去绑卡',
						confirmColor: '#00AF4E',
						success(res) {
							if (res.confirm) {
								app.$navTo('pages/assets/withdraw/account', {
									is_first: 1
								})
							}
						}
					});
					return;
				}
				if (amount == 0) {
					this.$toast('您当前没有可提现的金额')
					return;
				}
				if (Number(amount) < Number(min_amount)) {
					this.$toast(`最小提现金额为${min_amount}元`)
					return;
				}

				this.$navTo('pages/assets/withdraw/withdraw')
			},
			async getData() {
				const res = await Api.home();
				if (res.data) {
					this.info = res.data;
				}
			}
		},
		onShow() {
			this.getData();
		}
	}
</script>

<style lang="scss">
	.top-card {
		width: 686rpx;
		height: 548rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 24rpx auto;
		padding: 64rpx 80rpx;
	}

	.cell-group {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		overflow: hidden;
	}
</style>